<!-- comment-input.vue -->
<template>
	<view>
		<!-- 触发按钮 -->
		<slot name="trigger" :showCommentInput="showCommentInput">

			<image class="msg" src="/static/icon/msg.png" mode="widthFix"></image>
		</slot>
		<!-- 	<view name="trigger" @click.stop="showCommentInput">

		</view> -->

		<!-- 评论输入遮罩层 -->
		<view v-if="showInput && isOpen" class="comment-mask" @click="hideCommentInput">
			<view class="input-container" @click.stop="a">
				<textarea class="comment-input" :focus="showInput" :adjust-position="false" :placeholder="placeholder"
					v-model="commentContent" @focus="handleFocus" @blur="handleBlur" />
				<button class="send-btn" :style="{ color: sendBtnColor }" @click.stop="sendComment"
					:disabled="!commentContent.trim()">
					{{ sendBtnText }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CommentInput',
		props: {
			placeholder: {
				type: String,
				default: '输入评论...'
			},
			sendBtnText: {
				type: String,
				default: '发送'
			},
			sendBtnColor: {
				type: String,
				default: '#007AFF'
			},
			isOpen: {
				type: Boolean,
				default: false
			},
			id: {
				type: String,
			},

		},
		data() {
			return {
				showInput: false,
				commentContent: '',
				keyboardHeight: 0
			}
		},
		beforeDestroy() {
			// 移除键盘监听
			uni.offKeyboardHeightChange(this.onKeyboardHeightChange)
		},
		methods: {
			a() {},
			// 显示评论输入框
			showCommentInput() {
				this.showInput = true

			},

			// 隐藏评论输入
			hideCommentInput() {
				this.showInput = false
				this.commentContent = ''
				uni.hideKeyboard()
			},

			// 发送评论
			sendComment() {
				if (this.commentContent.trim() && this.commentContent.trim() != '') {
					this.$emit('submit', this.commentContent.trim(), this.id)
					this.hideCommentInput()
				} else {
					uni.showToast({
						title: '评论不能为空',
						icon: "none"
					})
				}
			},

			// 处理键盘弹起
			handleFocus() {
				uni.onKeyboardHeightChange(this.onKeyboardHeightChange)
			},

			// 处理键盘收起
			handleBlur() {
				this.keyboardHeight = 0
			},

			// 键盘高度变化回调
			onKeyboardHeightChange(res) {
				this.keyboardHeight = res.height
			}
		}
	}
</script>

<style scoped>
	/* 遮罩层 */
	.comment-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
	}

	/* 输入容器 */
	.input-container {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 9999;
		/* bottom: calc(150rpx + env(safe-area-inset-bottom)); */
		bottom: 0;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: flex-end;
		transition: bottom 0.3s ease;
		box-sizing: border-box;
	}

	/* 输入框 */
	.comment-input {
		flex: 1;
		min-height: 80rpx;
		max-height: 200rpx;
		padding: 16rpx;
		margin-right: 20rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		font-size: 28rpx;
		line-height: 1.5;
	}

	/* 发送按钮 */
	.send-btn {
		margin: 0;
		padding: 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		background-color: transparent;
		border: none;
	}

	.send-btn[disabled] {
		opacity: 0.5;
	}

	.msg {
		width: 40rpx;
		margin-top: 4rpx;
	}
</style>